<script setup lang="ts">

const props = defineProps({
    popupTitle: {
        type: String,
        default: '小助手长期未关机检测'
    }
})

const emit = defineEmits(['ship', 'hidden'])

const ship = (visible: boolean) => {
    emit('ship', visible)
    window.ipcRenderer.send('toggle-popup', visible)
}

const hidden = () => {
    emit('hidden')
}

defineExpose({
    ship,
    hidden
})

const handleQuit = () => {
    window.ipcRenderer.send('close-all-windows')
}
</script>
<template>
    <el-row class="top drag" justify="space-between">
        <el-col class="title" :span="18">
            <img src="../../assets/images/top-icon.png" alt="top-icon">
            <span>&nbsp;{{ props.popupTitle }}</span>
        </el-col>
        <el-col class="buttons no-drag" :span="6">
            <el-dropdown popper-class="popup-dropdown" size="small" trigger="click" placement="bottom-end">
                <img src="../../assets/images/arrow-down.png" alt="arrow-down">
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="ship(false)">内容不感兴趣</el-dropdown-item>
                        <el-dropdown-item @click="hidden()">近期不再显示</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <img src="../../assets/images/close.png" alt="close" @click="handleQuit">
        </el-col>
    </el-row>
</template>
<style lang="scss" scoped>
.el-popper {
    border-radius: unset !important;

    .el-dropdown-menu {
        padding: 0;

        :deep(.el-dropdown-menu__item) {

            &:not(.is-disabled):hover,
            &:not(.is-disabled):focus {
                background-color: rgb(217 217 217);
                color: #464646;
            }
        }
    }
}

.top {
    align-items: center;
    padding: 10px;

    // background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    background-color: #000;
    color: #fff;

    user-select: none;

    .title {
        display: flex;

        align-items: center;
        font-size: 14px;
        user-select: none;
        cursor: move;

        span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .buttons {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        user-select: none;

        img {
            margin-top: 2px;
            margin-left: 8px;
            cursor: pointer;
        }
    }
}
</style>